import React, { Component } from 'react'
import axios from 'axios'
const styles = {
    "marginBottom":"20px",
    "background": "yellow"
} 
 class Floor extends Component {
  state = {
      arr:[],
      activeIndex:0
  }
  async componentDidMount(){
    let res = await axios.get("/list1")
    this.setState({
        arr:res
    })
    setTimeout(()=>{
        window.addEventListener("scroll",this.handScroll,true)
    },100)
  }
  // 写一个让右侧滚动的事件
  handScroll = ()=>{
      let topS = this.myref.scrollTop // 右侧盒子得滚动距离
    //   console.log(topS);
    //  console.log(this.myref.children);
      let arr = Array.from(this.myref.children)
    //   console.log(arr);
     arr.forEach((item,index)=>{
         console.log(item.offsetTop,11)
         if(topS> item.offsetTop) {
             this.setState({
                 activeIndex:index
             })
         }
     })
  }
  checkIndex(ind){
      console.log(ind)
      this.setState({
        activeIndex:ind
      })
      console.log(this.myref,123)
      // 将一个元素平滑得滚动到最顶部
      this.myref.children[ind].scrollIntoView({behavior:"smooth"})
  }
  render() {
    let {arr} = this.state // arr 就代表了this.state.arr
    console.log(arr)
    return (
      <div className='floorwrap'>
          <div className='left'>
              {
                  arr.data&&arr.data.length?arr.data.map((item,index)=>{
                      return <h3 key={index} onClick={this.checkIndex.bind(this,index)} className={index == this.state.activeIndex?"active1":""}>{item.title}</h3>
                  }):"暂无数据"
              }
          </div>
          <div className='right' ref={(ref)=>{return this.myref = ref}}>
              {
                    arr.data&&arr.data.length?arr.data.map((item,index)=>{
                        return (
                            <div key={index} className="bao">
                                <h3 key={index} style = {styles} >{item.title}</h3>
                                {
                                      arr.data[index]&& arr.data[index].children? arr.data[index].children.map((ite,ind)=>{
                                          return (
                                              <div key={ind} className="dlwrap">
                                                  <dl>
                                                      <dt>
                                                          <img src={ite.img} alt="" />
                                                      </dt>
                                                      <dd>{ite.name}</dd>
                                                  </dl>
                                              </div>
                                          )
                                     }):"暂无数据"
                                }
                            </div>
                        )
                    }):"暂无数据"
              }
          </div>
      </div>
    )
  }
}

export default Floor